<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">

		<view class="xp24-32 xbs">
			<view class="fans xflex-x xp24-32 xbs xmb24" v-for="(item,index) in dataList" :key="index">
				<image class="fans-img xmr24" :src="item.image" mode=""></image>
				<view class="xflex1 fans-info xflex-y-between xai">
					<view class="xflex-x-between">
						<view class="xfz28 xc3 xfw500 xmr24">{{item.name}}</view>
						<view class="color1" v-if="item.status == 0">
							待审核
						</view>
						<view class="color2" v-if="item.status == 1">
							已通过
						</view>
						<view class="color3" v-if="item.status == 2">
							未通过
						</view>

					</view>
					<view class="xmb10">
						<view class="xflex-x xfz24">
							<view class="xmr32 xmb10">地址：{{item.location}}{{item.address}}</view>
							
						</view>
						
						<view class="xflex-x xfz24">
							<view class="xmr32">提交时间：{{item.createtime}}</view>
						</view>
						<view class="xfz24 xc90 xmt12 yuanyin"  v-if="item.status == 2">
							失败原因：{{item.refuse_reason}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		partnerapply
	} from '../../../network/home.js'
	let dataList = ref([])

	let paging = ref()

	const queryList = (pageNo, pageSize) => {
		partnerapply({
			page_no: pageNo,
			page_size: pageSize
		}).then(res => {
			console.log(res);
			paging.value.complete(res.data.lists)
		}).catch((res) => {
			paging.value.complete(false);
		});
	}
</script>

<style scoped lang="scss">
	.mb {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 999;
		top: 0;
	}

	.search {
		background-color: #fff;
	}

	.sx {
		background-color: #fff;
		padding: 25rpx 32rpx;
		position: relative;
		z-index: 1000;

		.sxbox {
			position: absolute;
			width: 100%;
			// height: 300rpx;
			background-color: #fff;
			left: 0;
			top: 80rpx;

			&-item {
				padding: 12rpx;
				border-bottom: 1rpx solid #90909015;
			}
		}

		&-icon {
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}

		&-name {
			font-size: 26rpx;
			font-weight: 400;
			color: #909090;
		}

		.active {
			font-weight: 400;
			color: #16baf4;
		}

	}

	.fans {
		width: 686rpx;
		// height: 143rpx;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;

		&-img {
			width: 82rpx;
			height: 82rpx;
			background: #d8d8d8;
			border-radius: 50%;
		}

		&-info {
			// height: 82rpx;
		}
	}

	.color1 {
		color: #666;
	}

	.color2 {
		color: #16baf4;
	}

	.color3 {
		color: #ff4644;
	}
	
	.yuanyin {
		color: #ff4644;
		font-size: 24rpx;
	}
</style>